<template>
  <div class="mainbox">
    <emptymain
      :emptytext="'暂无数据'"
      :emptyheight="'600px'"
      :emptylist="showList"
    >
      <span></span>
    </emptymain>
    <div class="clearfix">
      <div
        class="dcm_item"
        v-for="item in showList"
        :key="item.id"
        @click.stop="openDetail(item)"
      >
        <div class="dcm_itemicon">
          <img :src="base + item.url" />
          <!-- <div class="dcm_itembody"></div> -->
        </div>
        <div class="dcm_itemP1 text-ellipsis">{{ item.medicineAtlasName }}</div>
      </div>
    </div>
    <div class="index_mainpages top">
      <el-pagination
        hide-on-single-page
        background
        @current-change="currentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="total,  prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: {
      bodyId: Number,
      modalityId: Number,
      tplistdata: Array,
    },
    data() {
      //这里存放数据
      return {
        base: window.config.VUE_FILE_BASE_PATH,

        showList: [], // 当前分页展示的数据
        pageNum: 1,
        pageSize: 10,
        total: 0,
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
      tplistdata: {
        immediate: true,
        handler(newVal) {
          if (Array.isArray(newVal)) {
            this.total = newVal.length;
            this.updateShowList();
          }
        },
      },
    },

    //方法集合
    methods: {
      getatlasList() {
        atlasList({
          bodyId: this.bodyId,
          modalityId: this.modalityId,
        }).then((res) => {
          this.tplistdata = res.data;
          this.total = res.data.length;
          this.updateShowList(); // 初始分页数据
        });
      },
      updateShowList() {
        const start = (this.pageNum - 1) * this.pageSize;
        const end = start + this.pageSize;
        this.showList = this.tplistdata.slice(start, end);
        console.log('处理玩的数据', this.showList);
      },
      currentChange(val) {
        this.pageNum = val;
        this.updateShowList();
      },
      openDetail(item) {
        // if (!item.stuuid) {
        //   this.$message({
        //     type: 'error',
        //     message: '暂无影像图片',
        //   });
        //   return;
        // }
        const routeUrl = this.$router.resolve({
          name: 'atlas',
          query: {
            medicineAtlasId: item.medicineAtlasId,
            atlasTypeName: item.atlasTypeName,
          },
        });
        window.open(routeUrl.href, '_blank');
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      //   this.getatlasList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style scoped>
  .mainbox {
    padding: 0px 40px;
  }
  .dcm_itemicon {
    width: 100%;
    height: 255px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background: #000000;
    border-radius: 10px;
    margin: 0 0 16px 0;
    overflow: hidden;
  }
</style>
